import React from 'react';
import { Table } from 'antd';
import moment from 'moment/moment';
import Api from 'Utils/api';
import ImportData from './Component/ImportData';
import DownloadData from './Component/DownloadData';
import EqualBorder from './../../../components/CommonComponents/EqualBorder';
import './index.scss';

const PAGE_SIZE = 9;
class Inspect extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      dataCount: 0,
      currentPage: 1,
      pageSise: PAGE_SIZE
    };
    this.InspectResult = ::this.InspectResult;
    this.init = ::this.init;
  }
  componentDidMount() {
    this.init();
  }
  init() {
    const api = new Api({
      method: 'GET',
      path: '/enterprise_details/product_check',
      query: {
        limit: PAGE_SIZE,
        offset: (this.state.currentPage - 1) * PAGE_SIZE,
      },
      success: (json) => {
        this.setState({
          data: json.data_list,
          dataCount: json.total_count,
        });
      }
    });
    api.run();
  }
  InspectResult(text) {
    switch (text) {
      case 0: return '已检测';
      case 1: return '检测中';
      case 2: return '未检测';
      default: return '未知';
    }
  }
  generatorColumns() {
    return [
      {
        title: 'ID',
        dataIndex: 'id',
        render: text => (
          <span>{text}</span>
        )
      },
      {
        title: '被抽样单位名称',
        dataIndex: 'enterprise_name',
        render: text => (
          <span >{text}</span >
        )
      },
      {
        title: '样品名称',
        dataIndex: 'sample_name',
        render: text => (
          <span >{text}</span >
        )
      },
      {
        title: '抽样时间',
        dataIndex: 'check_date',
        render: text => (
          <span>{moment(text).format('YYYY-MM-DD')}</span >
        )
      },
      {
        title: '检验项目',
        dataIndex: 'project_name',
        render: text => (
          <span>{text}</span >
        )
      },
      {
        title: '检验结果',
        dataIndex: 'check_result',
        render: text => (
          <span>{this.InspectResult(text)}</span >
        )
      },
    ];
  }
  onListPageChange(page) {
    this.setState({ currentPage: page }, () => {
      this.init();
    });
  }
  render() {
    const columns = this.generatorColumns();
    return (
      <div className="data-import-wrap">
        <EqualBorder
          content={
            <div>
              <div className="btns-wrap">
                <DownloadData
                  fileName="抽检检测结果模板.csv"
                />
                <ImportData
                  path="/enterprises/product_check"
                  init={this.init}
                />
              </div>
              <div className="data-table-wrap">
                <Table
                  rowKey={record => record.id}
                  columns={columns}
                  bordered
                  dataSource={this.state.data}
                  pagination={{
                    pageSize: this.state.pageSise,
                    total: this.state.dataCount,
                    current: this.state.currentPage,
                    onChange: this.onListPageChange.bind(this)
                  }}
                />
              </div>
            </div>
          }
        />
      </div>
    );
  }
}

export default Inspect;
